/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="xc-body">
		<view class="xc-mask" @click="close()"></view>
		<!-- 两个弹窗不能同时显示 -->
		<NewXc v-if='showNew'></NewXc>
		
		<view class="xc-area" v-else>
			<view class="xc-head">
				<text class="xc-label">选择行程</text>
				<text class="new-xc" @click="newBtn()">新建</text>
			</view>
			<view class="xc-list">
				<view class="xc-item" v-for="(item,index) in xcData" :key='index'  @tap="xcIndex = index">
					<view class="item-leftBox">
						<view class="item-leftImg">
							<image :src="item.img"></image>
						</view>
						<view class="item-left">
							<view class="left-head">
								<text class="xc-item-label">{{item.title}}</text>
								<text class="xc-time">{{item.time}}</text>
							</view>
							<text class="xc-num">已有{{item.num}}条加入该行程</text>
						</view>
					</view>
					<view class="item-right">
						<view v-if="xcIndex != index" class="un-choose" ></view>
						<image  v-if="xcIndex == index" src="/static/map/choose.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="xc-btn-crew">
				<view class="xc-btn-yes" @click="commitXc">确认</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import NewXc from '@/components/newXc.vue'
	export default{
		data(){
			return{
				showNew:false,
				xcIndex:0,
				xcData:[
					{
						title:'沈阳三日游',
						time:'2019年09月08日',
						num:2,
						choose:true,
						img:'/static/glBan.png'
					},
					{
						title:'蜜月之旅',
						time:'2019年09月05日',
						num:1,
						choose:false,
						img:'/static/glBan.png'
					},
					{
						title:'我喜欢的城市',
						time:'2019年09月01日',
						num:2,
						choose:false,
						img:'/static/glBan.png'
					}
				],
				popData:{
					show:true,
					text:'已添加到行程',
					url:'/pages/gonglue/glTabbar'
				}
			}
		},
		methods: {
			close(){
				// document.body.style.overflow = 'scroll'
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeXc();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeXc();
				//#endif
			},
			commitXc(){
				this.$store.commit('showAddCussUpdate',this.popData)
				console.log(this.$store.state.showAddCuss.show)
				// #ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeXc();
				// #endif
				// #ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeXc();
				// #endif
			},
			newBtn(){
				this.showNew=true;
			},
			closeNew(){
				this.showNew=false;
				// 点击取消关闭两个弹窗
				// this.commitXc();
			}
		},
		created(){
			document.body.style.overflow = 'hidden'
		},
		components: {
			NewXc
		},
	}
</script>

<style scoped>
	
	.xc-body{
		width: 750upx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 31;
	}
	.xc-area{
		width: 700upx;
		height: 625upx;
		top: 24vh;
		left: 25upx;
		z-index: 36;
		right: 25upx;
		position: absolute;
		border-radius: 30upx;
		box-shadow:0 0 5px rgba(206,206,206,0.75);
		background: #FFFFFF;
	}
	.xc-mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 35;
		background: rgba(0,0,0,0.3);
	}
	.xc-head{
		border-radius: 30upx 30upx 0 0;
		background: #f3f3f3;
		width: 700upx;
		height: 100upx;
	}
	.xc-label{
		font-size: 30upx;
		line-height: 100upx;
		margin-left: 30upx;
		float: left;
	}
	.new-xc{
		font-size: 28upx;
		line-height: 100upx;
		margin-right: 40upx;
		float: right;
		color: #666666;
	}
	.xc-list{
		width: 650upx;
		margin-left: 25upx;
		margin-right: 25upx;
		height: 420upx;
		overflow: scroll;
	}
	.xc-item{
		width: 650upx;
		border-bottom: #F5F5F5 solid 1upx;
		height: 139upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.xc-item:last-child{
		border-bottom:none
	}
	.item-leftBox{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.item-leftImg{
		margin-right: 30upx;
		width:145upx;
		height: 113upx;
	}
	.item-leftImg image{
		width:145upx;
		height: 113upx;
		border-radius: 10upx;
	}
	.item-left{
		max-width:400upx;
		text-overflow: ellipsis;
		height: 102upx;
		white-space: normal;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	
	.left-head{
		height: 40upx;
		margin-top: 30upx;
	}
	.xc-item-label{
		width:168upx;
		color: #0075EE;
		height: 40upx;
		float: left;
		line-height: 40upx;
		font-size: 28upx;
		text-overflow: ellipsis;
		white-space: normal;
		overflow: hidden;
	}
	.xc-time{
		color: #999999;
		height: 40upx;
		float: left;
		font-size: 24upx;
		margin-left: 20upx;
		line-height: 40upx;
		text-overflow: ellipsis;
		white-space: normal;
		overflow: hidden;
	}
	.xc-num{
		color: #999999;
		font-size: 24upx;
		line-height: 20uopx;
	}
	.item-right{
		width: 50upx;
		float: right;
		height: 139upx;
	}
	.un-choose{
		width: 14px;
		height: 14px;
		margin-top: 60upx;
		background: #999999;
		border-radius: 50%;
	}
	.item-right image{
		width: 14px;
		height: 14px;
		margin-top: 60upx;
	}
	.xc-btn-crew{
		width: 700upx;
		height: 75upx;
		position: absolute;
		bottom: 20upx;
		text-align: center;
		text-align: center;
		font-size: 28upx;
	}
	.xc-btn-yes{
		width: 650upx;
		margin-left: 25upx;
		height: 75upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		line-height: 75upx;
		border-radius: 10upx;
	}
</style>
